import React from 'react';
import { Layout, Menu, Breadcrumb, Icon, ConfigProvider, Row, Col, Card, Button } from 'antd';
import styles from './index.less';
import Link from 'umi/link';
import zhCN from 'antd/es/locale/zh_CN';
import { userId } from '@/constant';
import { connect } from 'dva';
import logo from '@/assets/images/logo.png';
import quotes from './quotes';
import moment from 'moment';
const id = window.sessionStorage.getItem(userId);
const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;
const creator = (type, payload) => ({ type, payload });
class SiderDemo extends React.Component {
  state = {
    collapsed: false,
  };
  componentDidMount() {
    const { dispatch } = this.props;
    let id = window.sessionStorage.getItem(userId);
    let date=moment().format('YYYY-MM-DD');
    dispatch(creator('users/getUser', { id }));
    dispatch(creator('users/getQuote',date));
  }
  onCollapse = collapsed => {
    this.setState({ collapsed });
  };
  handleClick = () => {
    // console.log(111)
  };
  toggle = () => {
    var front = document.getElementById('front');
    var back = document.getElementById('back');
    if (front.style.transform == 'rotateY(180deg)') {
      front.style.transform = 'rotateY(0deg)';
      back.style.transform = 'rotateY(180deg)';
    } else {
      front.style.transform = 'rotateY(180deg)';
      back.style.transform = 'rotateY(0deg)';
    }
  };
  //插入多条名言
  add = () => {
    const { dispatch } = this.props;
    let dateArr = [];
    for (let i = 0; i < 367; i++) {
      let str = moment()
        .dayOfYear(i)
        .format('YYYY-MM-DD');
      dateArr.push(str);
    }
    console.log(dateArr.length)
    console.log(quotes.length)
    quotes.forEach((item, index) => {
      item.date = dateArr[index];
    });
    var i = 0;
    let timer=setInterval(() => {
      
      console.log(i)
      if(i>quotes.length-2){
        clearInterval(timer)
      }
      dispatch(creator('quotes/add', quotes[i]));
      i++
    }, 1000);
  };
  render() {
    const { users, quotes } = this.props.users;

    return (
      <ConfigProvider locale={zhCN}>
        {/* <Layout style={{ minHeight: '100vh' }} className={styles.logo}>
          <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse} onClick={this.handleClick()} >
            <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
              <SubMenu
                key="myWorld"
                title={
                  <span>
                    <Icon type="user" />
                    <span>我的世界</span>
                  </span>
                }
              >
                <Menu.Item key="plan"><Link to='/my-world/plan' replace>计划</Link></Menu.Item>
                <Menu.Item key="diary"><Link to='/my-world/diary' replace>日记</Link></Menu.Item>
                <Menu.Item key="exercise"><Link to='/my-world/exercise' replace>运动</Link></Menu.Item>
                <Menu.Item key="lifeCycle"><Link to='/my-world/lifeCycle' replace>人生轨迹</Link></Menu.Item>
                <Menu.Item key="timeArrow"><Link to='/my-world/timeArrow' replace>时间都去哪儿了</Link></Menu.Item>
              </SubMenu>
              <SubMenu
                key="outerWorld"
                title={
                  <span>
                    <Icon type="global" />
                    <span>外部世界</span>
                  </span>
                }
              >
                <Menu.Item key="cluture">文化广场</Menu.Item>
                <Menu.Item key="encyclopedias"><Link to='/outer-world/encyclopedias'>智者百科</Link></Menu.Item>
                <Menu.Item key="viewpoint">真知灼见</Menu.Item>
                <Menu.Item key="annoyance">成长的烦恼</Menu.Item>
              </SubMenu>
            </Menu>
          </Sider>
          <Layout>
            {this.props.children}
          </Layout>
        </Layout> */}
        <div
          style={{
            width: 1200,
            margin: '0 auto',
            height: '100%',
            display: 'flex',
            justifyContent: 'space-between',
            marginTop: 10,
          }}
        >
          <main
            style={{ width: 900, height: '100%', border: '1px solid #e8e8e8', overflowY: 'scroll' }}
          >
            {this.props.children}
          </main>

          <aside
            style={{
              width: 290,
              height: '100%',
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'space-between',
            }}
          >
            <div style={{ position: 'relative' }}>
              <Card id="front">
                <Row
                  style={{
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}
                >
                  <div
                    onClick={this.toggle}
                    style={{
                      width: 120,
                      height: 120,
                      borderRadius: '50%',
                      backgroundImage: users.length ? `url(${users[0].avatar})` : '',
                      backgroundSize: 'contain',
                    }}
                  ></div>
                </Row>
                <Row>
                  <Col span={12} style={{ textAlign: 'center' }}>
                    <Link
                      to={{
                        pathname: '/my-world/basicInfo',
                        search: `?id=${id}`,
                      }}
                    >
                      <Icon type="user" />
                      <span style={{ marginLeft: 4 }}>个人信息</span>
                    </Link>
                    {/* <Icon type="user" />
                    <span style={{ marginLeft: 4 }}>个人信息</span> */}
                  </Col>
                  <Col span={12} style={{ textAlign: 'center' }}>
                    <Icon type="poweroff" />
                    <span style={{ marginLeft: 4 }}>退出</span>
                  </Col>
                  {/* <Button type="danger" onClick={this.add.bind(this)}>
                    点击插入多条名言
                  </Button> */}
                </Row>
              </Card>
              <div
                id="back"
                onClick={this.toggle}
                style={{ border: '1px solid #e8e8e8', padding: 10, fontSize: 12, color: '#ccc' }}
              >
                <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                  <img src={logo} />
                </div>
                {quotes && Object.keys(quotes).length ? (
                  <div>
                    <p style={{ marginTop: 6,textIndent:'2em'}}>
                      {quotes.desc}--{quotes.author}
                    </p>
                    {/* <p style={{ textAlign: 'right' }}>--{quotes.author}</p> */}
                  </div>
                ) : (
                  <p style={{ marginTop: 6 }}>天下难事必作于易，天下大事必作于细。--老子</p>
                )}
              </div>
            </div>
            <div style={{ marginTop: 210, flex: 'auto' }}>
              <Menu
                theme="dark"
                defaultOpenKeys={['myWorld', 'outerWorld']}
                mode="inline"
                theme="light"
              >
                <SubMenu
                  key="myWorld"
                  title={
                    <span>
                      <Icon type="user" />
                      <span>我的世界</span>
                    </span>
                  }
                >
                  <Menu.Item key="plan">
                    <Link to="/my-world/plan" replace>
                      计划
                    </Link>
                  </Menu.Item>
                  <Menu.Item key="diary">
                    <Link to="/my-world/diary" replace>
                      日记
                    </Link>
                  </Menu.Item>
                  <Menu.Item key="exercise">
                    <Link to="/my-world/exercise" replace>
                      运动
                    </Link>
                  </Menu.Item>
                  <Menu.Item key="lifeCycle">
                    <Link to="/my-world/lifeCycle" replace>
                      人生轨迹
                    </Link>
                  </Menu.Item>
                  <Menu.Item key="timeArrow">
                    <Link to="/my-world/timeArrow" replace>
                      时间都去哪儿了
                    </Link>
                  </Menu.Item>
                </SubMenu>
                <SubMenu
                  key="outerWorld"
                  title={
                    <span>
                      <Icon type="global" />
                      <span>外部世界</span>
                    </span>
                  }
                >
                  <Menu.Item key="cluture">文化广场</Menu.Item>
                  <Menu.Item key="encyclopedias">
                    <Link to="/outer-world/encyclopedias">智者百科</Link>
                  </Menu.Item>
                  <Menu.Item key="viewpoint">真知灼见</Menu.Item>
                  <Menu.Item key="annoyance">成长的烦恼</Menu.Item>
                </SubMenu>
              </Menu>
            </div>
          </aside>
        </div>
      </ConfigProvider>
    );
  }
}

// export default connent(({user})=>({users}))(SiderDemo);
export default connect(({ users, quotes }) => ({ users, quotes }))(SiderDemo);
